<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>伪类选择器</title>

    <style>
        /* 
         伪类：
             用于已有元素处于某种状态时为其添加对应的样式，这个状态是根据用户行为而动态变化的
             例如：当用户悬停在指定元素时，可以通过:hover来描述这个元素的状态，虽然它和一般css相似，可以为已有元素添加样式，
             但是它只有处于DOM树无法描述的状态下才能为元素添加样式，所以称为伪类

            伪类一般情况下都是使用:开头   

             :first-child 第一个子元素
                :last-child 最后一个子元素
                :nth-child() 选中第n个子元素
                    特殊值：
                        n 第n个 n的范围0到正无穷
                        2n 或 even 表示选中偶数位的元素
                        2n+1 或 odd 表示选中奇数位的元素

                    - 以上这些伪类都是根据所有的子元素进行排序

                :first-of-type
                :last-of-type
                :nth-of-type()
                    - 这几个伪类的功能和上述的类似，不通点是他们是在同类型元素中进行排序
            - :not() 否定伪类
                - 将符合条件的元素从选择器中去除
         */

         ul>li:first-child{
             color: thistle;
         }

         ul>li:nth-child(3){
             font-size: 40px;
         }
    </style>
</head>
<body>
      <ul>
          <li>1</li>
          <li>2</li>
          <li>3</li>
          <li>4</li>
          <li>5</li>
      </ul>
</body>
</html>